<template>
    <div  class="login-container" :style ="note" >

        <div>

            <div v-show="show">
                <el-form :model="dataForm"  :rules="rules" ref="dataForm" label-width="auto" :label-position="labelPosition" class="login-form" >
                    <div style="font-weight: bolder ;font-family: 华文行楷; font-size: 30px;height: 80px" >新用户注册</div>
                    <el-form-item label="账号：" prop="username">
                        <el-input type="text" v-model="dataForm.username" prefix-icon="el-icon-user-solid" placeholder="请输入注册账号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：" prop="password">
                        <el-input type="password" v-model="dataForm.password" prefix-icon="el-icon-unlock"  show-password placeholder="请输入注册密码" ></el-input>
                    </el-form-item>
                    <el-form-item label="手机号：" prop="phone">
                        <el-input type="text"  v-model.number="dataForm.phone"  prefix-icon="el-icon-phone" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码：" prop="code"  >
                        <el-input type="text"  v-model.number="dataForm.code" style="width: 160px;float: left"   prefix-icon="el-icon-message" placeholder="请输入验证码"></el-input>
                        <el-button type="primary" plain style="float: right" v-bind:disabled="dis" @click="sendSms()">{{sms}}</el-button>
                    </el-form-item>

                        <el-button type="primary" style="width: 360px;margin-top: 16px;margin-bottom: 25px" @click="submitForm('dataForm')">立即注册</el-button>


                        <el-link type="primary" @click="isShow()">已经注册，立即登录>>>></el-link>

                </el-form>
            </div>

            <div v-show="!show">

                    <div v-show="showSign">
                        <el-form :model="signInForm"  :rules="rules" ref="signInForm" label-width="auto" :label-position="labelPosition" class="login-form" >
                            <div style="font-weight: bolder ;font-family: 华文行楷; font-size: 30px;height: 80px" >会员登录</div>

                            <el-tabs  v-model="activeName"   @tab-click="handleClick" >
                                <el-tab-pane label="快速登录" name="fast"></el-tab-pane>
                                <el-tab-pane label="普通登录" name="ordinary"></el-tab-pane>
                            </el-tabs>
                            <el-form-item label="手机号：" prop="phone">
                                <el-input type="text" v-model.number="signInForm.phone"  prefix-icon="el-icon-phone" placeholder="请输入手机号"></el-input>
                            </el-form-item>
                            <el-form-item label="验证码：" prop="code" >
                                <el-input type="text"  v-model.number="signInForm.code"  style="width: 160px;float: left;display: inline-block" prefix-icon="el-icon-message" placeholder="请输入验证码"></el-input>
                                <el-button type="primary" plain style="float: right" v-bind:disabled="dis" @click="sendSms()">{{sms}}</el-button>
                            </el-form-item>
                            <el-button type="primary" style="width: 360px;margin-top: 16px;margin-bottom: 25px" @click="signIn('signInForm')">立即登录</el-button>

                            <el-link type="primary" @click="isShow()">还未注册？立即注册>>>></el-link>
                        </el-form>
                    </div>


                    <div v-show="!showSign">
                        <el-form :model="signInFormByup"  :rules="rules" ref="signInFormByup" label-width="auto" :label-position="labelPosition" class="login-form" >
                            <div style="font-weight: bolder ;font-family: 华文行楷; font-size: 30px;height: 80px" >会员登录</div>

                            <el-tabs  v-model="activeName"   @tab-click="handleClick" >
                                <el-tab-pane label="快速登录" name="fast"></el-tab-pane>
                                <el-tab-pane label="普通登录" name="ordinary"></el-tab-pane>
                            </el-tabs>
                            <el-form-item label="账号：" prop="username">
                                <el-input type="text" v-model="signInFormByup.username"  prefix-icon="el-icon-phone" placeholder="请输入登录账号"></el-input>
                            </el-form-item>
                            <el-form-item label="密码：" prop="password" >
                                <el-input type="password" v-model="signInFormByup.password" prefix-icon="el-icon-unlock"  show-password placeholder="请输入登录密码" ></el-input>
                            </el-form-item>
                            <el-button type="primary" style="width: 360px;margin-top: 16px;margin-bottom: 25px" @click="signInByup('signInFormByup')">立即登录</el-button>

                            <el-link type="primary" @click="isShow()">还未注册？立即注册>>>></el-link>
                        </el-form>
                    </div>

            </div>

        </div>
    </div>

</template>

<script>
    import  qs from 'qs'

    export default {
        data() {

            return {

                sms:'获取验证码',
                show:true,
                showSign:true,
                dis:false,
                activeName: 'fast',
                // 手机号登录表单的数据
                signInForm:{
                    phone:'',
                    code:''
                },
                // 账号密码登录表单的数据
                signInFormByup:{
                    username: '',
                    password: '',
                },
                labelPosition: 'left',

                // 注册表单数据
                dataForm: {
                    username: '',
                    password: '',
                    phone:'',
                    code:''
                },

                note: {
                    backgroundImage:'url('+require('@/assets/car.jpg')+')',
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "100% 100%",

                },

                //验证规则
                rules: {
                    password: [
                        { required: true, message: '请输入注册密码', trigger: 'blur' }
                    ],
                    username: [
                        { required: true, message: '请输入注册账号名', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '手机号不能为空'},
                        { type: 'number', message: '手机号必须为数字值'}
                    ],
                    code: [
                        { required: true,  message: '请输入验证码',trigger: 'blur'}
                    ]
                },

            };
        },


        methods: {

            handleClick(tab, event) {
                if (this.activeName == "ordinary") {
                    this.showSign = false;
                };
                if (this.activeName == "fast") {
                    this.showSign = true;
                }
            },

            // 控制展示注册或登录页面
            isShow() {
                this.show = !this.show;
            },

            // 账号密码登录
            signInByup(signInFormByup) {
                // alert(JSON.stringify(this.signInFormByup))
                // 提交表单，登录验证
                this.$refs[signInFormByup].validate((valid) => {
                    if (valid) {
                        // 往后台发送请求
                        this.$axios({
                            method:'put',
                            url:'clms-client/client/signInByup',
                            data:qs.stringify(this.signInFormByup)
                        }).then(result=>{
                            if(result.data.code == 200 ){
                                this.$message.success(result.data.object);
                            }else {
                                this.$message.error(result.data.object);
                            }
                        })
                    } else {
                        this.$message({
                            message: '请完整填写登录信息',
                            type: 'warning'
                        });
                        return false;
                    }

                });
            },

            // 手机号验证码登录
            signIn(signInForm) {
                //alert(JSON.stringify(this.signInForm))
                // 提交表单，登录验证
                this.$refs[signInForm].validate((valid) => {
                    if (valid) {
                        // 往后台发送请求
                        this.$axios({
                            method:'put',
                            url:'clms-client/client/signIn',
                            data:qs.stringify(this.signInForm)
                        }).then(result=>{
                            if(result.data.code == 200 ){
                                this.$message.success(result.data.object);
                            }else {
                                this.$message.error(result.data.object);
                            }
                        })
                    } else {
                        this.$message({
                            message: '请完整填写登录信息',
                            type: 'warning'
                        });
                        return false;
                    }

                });
            },

            // 注册发送验证码
            sendSms() {
                this.dis = true;
                var i = 59;
                var timer = setInterval(()=> {
                    this.sms = "正在发送" + i + "s";
                    i--;
                    if (i == 0) {
                        this.sms = "重新发送";
                        this.dis = false;
                        clearInterval(timer);
                    }
                }, 1000);
                // 往后台发送请求，获取短信验证码
                this.$axios({
                    method:'post',
                    url:'clms-client/client/sendSms',
                    params:{
                        phone:this.dataForm.phone
                    }
                }).then(result=>{
                    if(result.data.code == 200 ){
                        this.$message.success(result.data.object);
                    }else {
                        this.$message.error(result.data.object);
                    }
                })
            },


            // 注册表单提交事件
            submitForm(formName) {
                // 提交表单，登录验证
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 往后台发送请求
                        this.$axios({
                            method:'put',
                            url:'clms-client/client/registerClient',
                            data:qs.stringify(this.dataForm)
                        }).then(result=>{
                            if(result.data.code == 200 ){
                                this.$message.success(result.data.message);
                            }else {
                                this.$message.error(result.data.object);
                            }
                        })
                    } else {
                        this.$message({
                            message: '请完整填写注册信息',
                            type: 'warning'
                        });
                        return false;
                    }

                });
            }

        }
    }
</script>

<style >

    .login-form {
        width: 360px;
        height: 480px;
        margin: 150px 1200px;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 50px;
        border-radius: 10px;
        box-shadow: black 6px 6px 50px, black -6px -6px 50px;
        font-weight: bolder;
    }

    /* 背景 */
    .login-container {
        width: 100%;
        height: 100%;
        position: fixed;
    }

</style>
